;
(function () {
    "use strict";
    // 加载头部
    $.ajax({
        type: "get",
        url: "http://localhost:3000/public/header.html",
        success: function (response) {
            $("#head").html(response);
            // 加载登陆信息
            isLogin();
        }
    });

    // 请求手机商品数据
    // 从地址栏分割从首页传过来的id
    const id = location.search.split("=")[1];
    $.ajax({
        url: "http://localhost:3000/api",
        type: "get",
        data: {
            type: "getThisGood"
        },
        success: function (res) {
            res = JSON.parse(res).goods1.data;
            let i = 0;
            res.some((val, idx) => {
                i = idx;
                return val.id === id;
            })
            // 通过数据来渲染
            initGoods(res[i], id);
        }
    });

    function initGoods(res, id) {
        // 小图的渲染
        $(".small_box").append(` <img src="./${res.src}" alt="${res.src}">
        <span></span>
        <em></em>`);
        // 大图的渲染
        $(".big_box").append(`<img src="./${res.src}" alt="${res.src}">`)
        // 执行放大镜
        new Magnifier();

        // 数据的问题,把小图列表的数据放入当前对象的imgs内
        // 小图列表的渲染
        let simgList = "";
        res.imgs.forEach(val => {
            simgList += `<li><img src="${val}" alt=""></li>`
        })
        $(simgList).appendTo($(".cont ul"));
        // 图片数据
        const imgs = [{
            s: `${res.imgs[0]}`,
            m: `${res.imgsBig[0]}`,
            l: `${res.imgsBig[0]}`,
        }, {
            s: `${res.imgs[1]}`,
            m: `${res.imgsBig[1]}`,
            l: `${res.imgsBig[1]}`,
        }, {
            s: `${res.imgs[2]}`,
            m: `${res.imgsBig[2]}`,
            l: `${res.imgsBig[2]}`,
        }];
        // 执行点击小图切换中图和大图
        new Tab(imgs);

        // 渲染名字和价格
        $("#goodtitle").append(`<h2>${res.name}</h2>
        <p>${res.price}</p>`);

        // 渲染加入购物车按钮
        $("#addTocar").append(`<button id="addTocarBt" my_id="${id}">加入购物车</button>`)

        $("#addTocar").on("click", "#addTocarBt", function () {
            // 获取当前商品的id
            const id = $(this).attr("my_id");
            // 获取当前商品的价格并转换成数值类型
            const price = res.price.slice(1)-0;
            // 将点击商品信息存入本地存储
            // 先判断本地存储是否存在,不存在就创建一个
            const goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
            // 第一次添加
            if (goods.length < 1) {
                goods.push({
                    id: id,
                    num: 1,
                    price: price,
                    flag:1
                })
            } else {
                let i = 0;
                const flag = goods.some((val, idx) => {
                    i = idx;
                    return val.id === id
                })
                if (flag) {
                    goods[i].num++;
                } else {
                    goods.push({
                        id: id,
                        num: 1,
                        price: price,
                        flag:1
                    })
                }
            }
            localStorage.setItem("goods", JSON.stringify(goods))

            if(confirm("加入购物车成功，是否到购物车看看")){
                location.href = "./cart.html";
            }

        });


    }

    // 点击小图切换中图和大图
    function Tab(imgs) {
        this.li = document.querySelectorAll(".cont li");
        this.sImg = document.querySelector(".small_box img");
        this.bImg = document.querySelector(".big_box img");
        this.data = imgs;
        this.index = 0;
        this.addEvent();
    }
    Tab.prototype.addEvent = function () {
        const that = this;
        for (let i = 0; i < this.li.length; i++) {
            this.li[i].xuhao = i;
            this.li[i].onclick = function () {
                that.hide();
                that.getIndex(this);
            }
        }
    }
    Tab.prototype.hide = function () {
        this.li[this.index].className = "";
    }
    Tab.prototype.getIndex = function (now) {
        this.index = now.xuhao;
        this.show();
    }
    Tab.prototype.show = function () {
        this.li[this.index].className = "active";
        this.sImg.src = this.data[this.index].m;
        this.bImg.src = this.data[this.index].l;
    }

    // 放大镜功能
    class Magnifier {
        constructor() {
            this.sBox = document.querySelector(".small_box");
            this.sSpan = document.querySelector(".small_box span");
            this.bBox = document.querySelector(".big_box");
            this.bImg = document.querySelector(".big_box img");
            this.addEvent();
        }
        move(ops) {
            let l = ops.x - this.sSpan.offsetWidth / 2;
            let t = ops.y - this.sSpan.offsetHeight / 2;
            if (l < 0) l = 0;
            if (t < 0) t = 0;
            if (l > this.sBox.offsetWidth - this.sSpan.offsetWidth) {
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if (t > this.sBox.offsetHeight - this.sSpan.offsetHeight) {
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
            this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
        }
        init() {
            this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
            this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
        }
        addEvent() {
            const that = this;
            this.sBox.onmouseenter = function () {
                that.show();
            }
            this.sBox.onmouseleave = function () {
                that.hide();
            }
            this.sBox.onmousemove = function (eve) {
                const e = eve || window.event;
                const pos = {
                    x: e.offsetX,
                    y: e.offsetY
                };
                that.move(pos);
            }
        }
        show() {
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
            this.init();
        }
        hide() {
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
    }


})();